<template>
  <div class="custom-grid">
    <el-form-item
      :prop="propName"
      label
      :rules="required?{ required: true, message: `请上传${lebal}`, trigger: 'blur' }:{}"
    >
      <el-input v-model="form[propName]" style="display:none;" />
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="(res, file) => handleImgSuccess(uploadConfig.prefix, res, file)"
        :before-upload="file => beforeAvatarUpload(uploadConfig.prefix, file)"
        :disabled="imgLoading || disabled"
        :headers="getAuthorization()"
      >
        <div v-if="propImg">
          <img class="avatar" :src="propImg">
          <span class="el-upload-list__item-actions" @click.stop>
            <span
              class="el-upload-list__item-icon"
              @click.stop="handlePictureCardPreview(uploadConfig.prefix)"
            >
              <i class="el-icon-zoom-in" />
            </span>
            <span
              :hidden="parentData.isDetail || disabled"
              class="el-upload-list__item-icon"
              @click.stop="handleRemove(uploadConfig.prefix)"
            >
              <i class="el-icon-delete" />
            </span>
          </span>
        </div>
        <div v-else class="avatar-uploader-icon">
          <i v-if="imgLoading" class="el-icon-loading" />
          <i v-else class="el-icon-plus" />
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" append-to-body :modal="showShade">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>
    </el-form-item>
    <div style="margin-top: 8px;">{{ lebal }}</div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'ImgUpload',
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          isDetail: false
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: [Boolean, Number],
      default: true
    },
    uploadConfig: {
      type: Object,
      default() {
        return {
          lebal: '公司logo',
          prefix: 'logo',
          suffix: 'Img',
          form: {},
          modal: true,
          isRequired: true
        }
      }
    }
  },
  data() {
    return {
      // uploadUrl: process.env.VUE_APP_BASE_API + 'ntocc-tps-api/fileUpload',
      uploadUrl: this.uploadUrl,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    lebal() {
      return this.uploadConfig.lebal
    },
    imgLoading() {
      return this.uploadConfig.form[
        `${this.uploadConfig.prefix}${this.uploadConfig.suffix}Loading`
      ]
    },
    propImg() {
      return this.uploadConfig.form[
        `${this.uploadConfig.prefix}${this.uploadConfig.suffix}`
      ]
    },
    propName() {
      return `${this.uploadConfig.prefix}${this.uploadConfig.suffix}`
    },
    showShade() {
      return this.uploadConfig.modal
    },
    form() {
      return this.uploadConfig.form
    }
  },
  methods: {
    // 上传前
    beforeAvatarUpload(prefix, file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/bmp' ||
        file.type === 'image/png'
      const isLtnM = file.size / 1024 / 1024 < 4
      const isLtnM2 = file.size >= 1024
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,BMP,PNG 格式!')
      }
      if (!isLtnM2) {
        this.$message.error('上传图片大小不能小于 1K!')
      }
      if (!isLtnM) {
        this.$message.error('上传图片大小不能超过 4MB!')
      }
      if (isJPG && isLtnM && isLtnM2) {
        Vue.set(
          this.uploadConfig.form,
          `${prefix}${this.uploadConfig.suffix}`,
          ''
        )
        Vue.set(
          this.uploadConfig.form,
          `${prefix}${this.uploadConfig.suffix}Loading`,
          true
        )
      }
      return isJPG && isLtnM && isLtnM2
    },
    // 上传后
    async handleImgSuccess(prefix, res, file) {
      await this.$emit('handleImgSuccess', res.data)
      Vue.set(
        this.uploadConfig.form,
        `${prefix}${this.uploadConfig.suffix}`,
        res.data
      )
      Vue.set(
        this.uploadConfig.form,
        `${prefix}${this.uploadConfig.suffix}Loading`,
        false
      )
    },
    // 放大
    handlePictureCardPreview(prefix) {
      this.dialogImageUrl = this.uploadConfig.form[
        `${prefix}${this.uploadConfig.suffix}`
      ]
      this.dialogVisible = true
    },
    // 删除
    handleRemove(prefix) {
      Vue.set(
        this.uploadConfig.form,
        `${prefix}${this.uploadConfig.suffix}`,
        ''
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-grid {
  display: inline-block;
  font-size: 14px;
  color: #8c939d;
  margin-right: 20px;
  .avatar-uploader {
    position: relative;
    cursor: pointer;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    .avatar-uploader-icon {
      font-size: 30px;
      color: #8c939d;
      border-radius: 10px;
      width: 150px;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px dashed #c0ccda;
      &:hover {
        border-color: #409eff;
      }
    }
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }
    .el-upload-list__item-actions {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      &:hover {
        opacity: 1;
      }
      .el-upload-list__item-icon {
        cursor: pointer;
        margin: 0 10px;
      }
    }
  }
}
</style>
